<template>
  <a
    :href="chatManager.getGoodsContent(item.content, 'href')"
    :class="[
      'goods-href href-area card-area',
      item.chatPosition == MsgPosition.LEFT ? 'card-left' : 'card-right',
      props.pageType === 'pc' ? 'card-area-pc' : 'card-area-mobile'
    ]"
    target="_blank"
  >
    <div class="card-title">
      {{ chatManager.getGoodsContent(item.content, 'cardTitle') }}
    </div>
    <div class="card-content">
      <img :src="pic" alt="" />
      <div
        class="goods-datainfo goods-content"
        v-if="item.messageType === MessageType.MESSAGE_ORDER"
      >
        <div>订单编号：{{ chatManager.getGoodsContent(item.content, 'number') }}</div>
        <div>订单日期：{{ chatManager.getGoodsContent(item.content, 'date') }}</div>
        <div class="goods-price">
          {{ chatManager.getGoodsContent(item.content, 'price') }}
        </div>
      </div>
      <div
        class="goods-datainfo goods-content"
        v-else-if="item.messageType === MessageType.MESSAGE_GOODS"
      >
        <div>商品编号：{{ chatManager.getGoodsContent(item.content, 'number') }}</div>
        <div>商品名称：{{ chatManager.getGoodsContent(item.content, 'name') }}</div>
        <div class="goods-price">
          {{ chatManager.getGoodsContent(item.content, 'price') }}
        </div>
      </div>
      <div
        class="goods-datainfo goods-content"
        v-else-if="item.messageType === MessageType.MESSAGE_CARD"
      >
        <div>{{ chatManager.getGoodsContent(item.content, 'cardDesc') }}</div>
        <div class="card-href">{{ chatManager.getGoodsContent(item.content, 'href') }}</div>
      </div>
    </div>
  </a>
</template>

<script lang="ts" setup>
import { MessageType, MsgPosition } from '@/lib/types';
import { computed } from 'vue';
const props = defineProps({
  //页面展示类型  pc  mobile
  item: {
    type: Object,
    default: () => {
      return {};
    }
  },
  chatManager: {
    type: Object,
    default: () => {
      return {};
    }
  },
  pageType: {
    type: String,
    default: 'pc'
  }
});

const item = computed(() => {
  return props.item;
});

const pic = computed(() => {
  const cardPic = props.chatManager.getGoodsContent(item.value.content, 'cardPic');
  if (cardPic) {
    return cardPic;
  }
  return props.chatManager.getGoodsContent(item.value.content, 'pic');
});
</script>

<style lang="scss" scoped>
.card-area {
  border-radius: 8px 0px 8px 8px;
  border: 1px solid #dadada;
  padding: 12px;
}
.card-area-pc {
  width: 399px;
}
.card-area-mobile {
  width: 250px;
}
.card-left {
  border-radius: 0px 8px 8px 8px;
}
.card-right {
  border-radius: 8px 0px 8px 8px;
}
.card-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #333333;
}
.card-content {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 12px;
  color: #666666;
  width: 100%;

  img {
    width: 56px;
    height: 56px;
    margin-right: 12px;
  }

  .goods-price {
    color: #f32727;
    margin-right: 20px;
  }

  .goods-content {
    flex: 1;
    width: calc(100% - 76px);
  }
  .card-href {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
</style>
